<template>
	<view class="page">
		<!-- 标题 -->
		<view class="header">
			<view class="title">
				{{details.title}}
			</view>
			<view class="info" v-if="details.title">
				<text>{{details.medium}}</text>
				<text>|</text>
				<text>{{details.time}}</text>
				<text>浏览量 {{details.pageviewNum}} </text>
			</view>
		</view>

		<view class="content">
			<!-- 富文本内容 -->
			<rich-text :nodes="details.html"></rich-text>

			<!-- 点赞 收藏 分享 -->
			<view class="btns" id="btns">
				<view @click="like()">
					<uni-icons :type="details.isLike? 'hand-up-filled' : 'hand-up'" size="28"
						:color="details.isLike? '#7b94ff' : '#efeff3'"></uni-icons>
					<text class="text">{{details.likeNum}}</text>
				</view>
				<view @click="collect()">
					<uni-icons :type="details.isCollect? 'star-filled' : 'star'" size="28"
						:color="details.isCollect? '#7b94ff' : '#efeff3'"></uni-icons>
					<text class="text">{{details.commentNum}}</text>
				</view>
				<view @click="share()">
					<uni-icons type="redo" size="28" color="#efeff3"></uni-icons>
					<text class="text">分享</text>
				</view>
			</view>
		</view>

		<!-- 评论区 -->
		<view class="comment">
			<view class="title">
				评论<text>{{details.commentNum}}</text>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) of details.commentData" :key="index">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="commentInfo">
						<view class="nickname">
							{{item.nickname}}
						</view>
						<view class="commentText">
							{{item.content}}
						</view>
						<view class="info">
							<text>{{item.location}}</text>
							<text>·</text>
							<text>{{item.time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tip" v-if="details.commentData.length==0">
				还没有评论喔~
			</view>
		</view>

		<view class="footer">
			<view class="input">
				<input type="text" v-model="inputText" placeholder="我来说两句" />
			</view>
			<view class="btn">
				<view class="send" v-if="inputText!=''" @click="sendComment">
					发送
				</view>
				<view class="icons" v-else>
					<view @click="like()">
						<uni-icons :type="details.isLike? 'hand-up-filled' : 'hand-up'" size="30"
							:color="details.isLike? '#7b94ff' : '#000'"></uni-icons>
						<text class="num">{{details.likeNum}}</text>
					</view>
					<view @click="collect()">
						<uni-icons :type="details.isCollect? 'star-filled' : 'star'" size="30"
							:color="details.isCollect? '#7b94ff' : '#000'"></uni-icons>
						<text class="num">{{details.collectNum}}</text>
					</view>
					<view @click="share()">
						<uni-icons type="redo" size="30" color="#000"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<view class="toTop" @click="scrollToTop" v-show="scrollTop>1000">
			<uni-icons type="arrow-up" size="30" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {
					id: "",
					title: "", // 标题
					medium: "", // 媒体名称
					time: "", // 发布时间
					html: "", // 富文本内容
					pageviewNum: 0, // 浏览量
					likeNum: 0, // 点赞数
					collectNum: 0, // 收藏数
					commentNum: 0, // 评论数
					isLike: false, // 是否点赞
					isCollect: false, // 是否收藏
					commentData: [], // 评论列表
				},

				inputText: "" ,// 评论输入框的内容
				scrollTop: 0, // 页面滚动高度
			}
		},

		onLoad() {
			this.getNewsDetails()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			getNewsDetails() {
				uni.showLoading({
					title: "加载中..."
				})
				// request...
				// 在这里进行网络请求获取新闻详情数据
				// 对details及其他数据进行赋值
				// this.details = res.data



				uni.request({
					url: "https://fc-mp-55b3cd3b-8c2c-4c73-bad5-d78291945fa2.next.bspapp.com/news/getNewsDetails",
					success: ({
						data: res
					}) => {
						console.log(res)
						this.details = res.data
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			like() {
				if (this.details.isLike) {
					// 取消点赞
					// request...
					this.details.isLike = false
					this.details.likeNum--

				} else {
					// 点赞
					// request...
					this.details.isLike = true
					this.details.likeNum++
				}
			},
			collect() {
				if (this.details.isCollect) {
					// 取消收藏
					// request...
					this.details.isCollect = false
					this.details.collectNum--

				} else {
					// 收藏
					// request...
					this.details.isCollect = true
					this.details.collectNum++
				}
			},
			share() {
				uni.showToast({
					title: "分享",
					icon: "none"
				})
			},
			sendComment() {
				// 发送评论
				// request...
				var data = {
					nickname: "我",
					avatar: "https://imgapi.cn/api.php/123410",
					location: "浙江",
					time: "刚刚",
					content: this.inputText
				}
				this.details.commentData.unshift(data)
				this.details.commentNum++
				this.inputText = ''
				
				this.scrollToComment()
			},
			
			
			//uni.pageScrollTo：App、H5、微信小程序2.7.3+ 、支付宝小程序1.20.0+支持
			//其他平台请酌情
			scrollToTop() {
				// 页面滚动到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			scrollToComment() {
				// 页面滚动到评论位置
				uni.pageScrollTo({
					selector: ".comment",
					duration: 500
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		padding-bottom: 100rpx;
		min-height: 100vh;
		box-sizing: border-box;

		>view {
			padding: 40rpx;
			background-color: #fff;
		}

		.header {
			margin-bottom: 20rpx;
			.title {
				font-size: 34rpx;
				font-weight: 500;
				color: #000;
				line-height: 1.5;
				margin-bottom: 20rpx;
				text-align: justify;
			}

			.info {
				line-height: 1.5;
				font-size: 22rpx;
				color: rgba(0, 0, 0, .7);

				text {
					margin-right: 20rpx;
				}
			}
		}

		.content {
			margin-bottom: 20rpx;
			min-height: 500rpx;

			img,
			video {
				max-width: 100%;
				height: auto;
				border-radius: 4px;
				vertical-align: middle;
			}

			.btns {
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					min-width: 180rpx;
					padding: 10rpx;
					border: 1rpx solid #efeff3;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.text {
						font-size: 26rpx;
						margin-left: 10rpx;
						color: #232323;
					}
				}

				view:active {
					transform: scale(1.04);
				}
			}
		}

		.comment {

			.title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 30rpx;

				text {
					margin-left: 10rpx;
				}
			}

			.list {
				.item {
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;

					image {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						background-color: rgba(196, 196, 196, .1);
					}

					.commentInfo {
						flex: 1;

						.nickname {
							color: rgba(0, 0, 0, .7);
							font-size: 26rpx;
						}

						.commentText {
							padding: 12rpx 0;
							line-height: 1.5;
							font-size: 28rpx;
							text-align: justify;
						}

						.info {
							color: #aaaaaa;

							text {
								font-size: 22rpx;
								margin-right: 8rpx;
							}
						}

					}
				}
			}


			.tip {
				text-align: center;
				color: #aaaaaa;
				font-size: 24rpx;
				line-height: 200rpx;
			}
		}

		.footer {
			margin-bottom: 0;
			padding: 0 40rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100vw;
			box-sizing: border-box;
			height: 100rpx;
			border-top: 1rpx solid #f8f8f8;
			box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .02);

			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				background-color: rgba(196, 196, 196, .1);
				padding: 10rpx;
				border-radius: 8rpx;
				flex: 1;
				margin-right: 40rpx;

				input {
					width: 100%;
				}
			}

			.btn {
				display: flex;
				align-items: center;

				.icons {
					display: flex;
					align-items: center;

					view {
						margin-left: 20rpx;
						position: relative;

						.num {
							position: absolute;
							left: 50%;
							bottom: -18rpx;
							transform: translateX(-50%);
							font-size: 20rpx;
						}
					}

					view:nth-child(1) {
						margin-left: 0;
					}
				}

				.send {
					padding: 10rpx 30rpx;
					background-color: #7b94ff;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		
		.toTop{
			padding: 8rpx;
			position: fixed;
			right: 40rpx;
			bottom: 120rpx;
			border-radius: 50%;
			background-color: #7b94ff;
			box-shadow: 0 2rpx 16rpx 6rpx rgba(123, 148, 255, .2);
		}
		.toTop:active{
			transform: scale(1.01);
			opacity: .9;
		}
	}
</style>